<template>
  <div class="main window">
    <div class="left-sider">
      <div class="avatar"></div>
      <div class="menu-list">
        <template
          v-for="item in menuList.filter((item) => item.position === 'top')"
          :key="item.name"
        >
          <div
            :class="['list-item', item.icon, item.name === activeMenu.name ? 'active' : '']"
            @click="changeMenu(item)"
          ></div>
        </template>
      </div>
      <div class="menu-list menu-bottom">
        <template
          v-for="item in menuList.filter((item) => item.position === 'bottom')"
          :key="item.name"
        >
          <div
            :class="['list-item', item.icon, item.name === activeMenu.name ? 'active' : '']"
            @click="changeMenu(item)"
          ></div>
        </template>
      </div>
    </div>
    <div class="right-container">
      <router-view v-slot="{ Component }">
        <keep-alive include="chat">
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const menuList = [
  {
    name: 'chat',
    icon: 'iconfont icon-liaotian',
    path: '/chat',
    countKey: 'chatCount',
    position: 'top'
  },
  {
    name: 'contact',
    icon: 'iconfont icon-tongxunlu',
    path: '/contact',
    countKey: 'contactCount',
    position: 'top'
  },
  {
    name: 'setting',
    icon: 'iconfont icon-shezhi',
    path: '/setting',
    position: 'bottom'
  }
]
const activeMenu = ref(menuList[0])
function changeMenu(item) {
  activeMenu.value = item
  router.push(item.path)
}
</script>

<style scoped lang="scss">
.main {
  min-height: 600px;
  padding: 8px;
  display: flex;
  padding: 0px;
  .left-sider {
    width: 48px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    .avatar {
      width: 48px;
      height: 48px;
    }
    .menu-list {
      color: #fff;
      text-align: center;
    }
    .menu-bottom {
      position: absolute;
      bottom: 0;
    }
    .list-item {
      width: 48px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: 22px;
      transition: 0.2s;
      &.active {
        background: rgba(255, 255, 255, 0.6);
        color: var(--base-color);
        font-weight: bold;
      }
    }
  }
  .right-container {
    width: 100%;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.1);
    margin-left: 8px;
    border-radius: 8px;
  }
}
</style>
